<template>
  <div>
    <DatePick class="mb12" v-model="dateRange2" />

    <el-table :data="tableData2" style="width: 100%" class="cover-table" border>
      <el-table-column prop="date" :label="t('member.时间')" sortable />
      <el-table-column prop="orderCount" :label="t('member.新增商品数')" sortable />
      <el-table-column prop="orderUserCount" :label="t('member.动销商品数')" sortable />
      <el-table-column prop="orderAmount" :label="t('member.下单数')" sortable />
      <el-table-column prop="payOrderCount" :label="t('member.下单金额')" sortable>
        <template #default="scope">
          ¥{{ scope.row.payAmount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="payUserCount" :label="t('member.支付订单数')" sortable />
      <el-table-column prop="payAmount" :label="t('member.支付金额')" sortable>
        <template #default="scope">
          ¥{{ scope.row.payAmount.toFixed(2) }}
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt10">
      <el-pagination
        v-model:current-page="pageInfo2.currentPage"
        v-model:page-size="pageInfo2.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo2.total"
        @size-change="handleReportSizeChange"
        @current-change="handleReportCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import moment from "moment";
import DatePick from "@/components/datePick.vue";

const { t } = useI18n();

const dateRange2 = ref(moment().format("YYYY-MM-DD"));
const pageInfo2 = ref({
  currentPage: 1,
  pageSize: 10,
  total: 100,
});

const tableData2 = ref(
  Array.from({ length: 10 }, (_, index) => ({
    date: moment().add(index, "day").format("YYYY-MM-DD"),
    orderCount: Math.floor(Math.random() * 100),
    orderUserCount: Math.floor(Math.random() * 100),
    orderAmount: Math.floor(Math.random() * 1000),
    payOrderCount: Math.floor(Math.random() * 100),
    payUserCount: Math.floor(Math.random() * 100),
    payAmount: Math.floor(Math.random() * 1000),
  }))
);

const handleReportSizeChange = (size) => {
  pageInfo2.value.pageSize = size;
};
const handleReportCurrentChange = (current) => {
  pageInfo2.value.currentPage = current;
};
</script>
<style lang="scss" scoped></style>
